import { useCssVar } from "@vueuse/core";
import { useIndexStore } from "/@ts/store";
import { getLocalStorage, setLocalStorage } from "./storage";
import blueIndustryJSON from "/@ts/defaultValue/theme/blueIndustry";
import systemDefaultJSON from "/@ts/defaultValue/theme/systemDefault";
import systemEyeshadowJSON from "/@ts/defaultValue/theme/systemEyeshadow";
import { sysThemeList } from "../defaultValue/theme";
const navColorFont = useCssVar("--navColorFont");
const colorPrimary = useCssVar("--el-color-primary");
const colorPrimary3 = useCssVar("--el-color-primary-light-3");
const colorPrimarydark2 = useCssVar("--el-color-primary-dark-2");

//顶部导航文字颜色
const componentSize = useCssVar("--el-component-size");
// componentSize.value = "32px"
//顶部导航背景颜色
const navColorBg = useCssVar("--navColorBg");
//内容背景色
const bodyBg = useCssVar("--bodyBg");
const commonBoxmp = useCssVar("--commonBoxmp");
//输入框禁用背景色
const inputDisabledBg = useCssVar("--el-fill-color-light");
//输入框边框颜色
const inputBorderColorLigth = useCssVar("--el-border-color-light");
//普通文本颜色
const textRegular = useCssVar("--el-text-color-regular")
//填充色
const blankColor = useCssVar("--el-fill-color-blank")
//系统背景色
const bgColor = useCssVar("--el-bg-color")
//二级文本颜色
const secondaryTextColor = useCssVar("--el-text-color-secondary")
//表格边框颜色
const borderColorTable = useCssVar("--el-border-color-lighter")
//菜单容器 边框色
const menuborderColorTable = useCssVar("--menuborderColorTable")
// 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset
//文本主要颜色
const textColorPrimary = useCssVar("--el-text-color-primary")
// 按钮文本颜色
const radioTextColor = useCssVar("--radio-text-color")
// 详情列表表头背景色
const  labelBgDetail = useCssVar("--labelBg-detail")
const labelTextColorDetail = useCssVar("--labelTextColor-detail")
// 边框颜色
const borderColor = useCssVar("--el-border-color")
// 过滤容器字体颜色
const filterViewTextColor =   useCssVar("--filterView-text-color")

//背景色上面的颜色
const overlayColor = useCssVar("--el-bg-color-overlay")
// 输入框占位符色
const placeholderColor = useCssVar("--el-text-color-placeholder")
// bodyBg.value = "#FFF"
// textRegular.value = "#606266"

//菜单 start
//菜单默认字体颜色
const menuColorFont = useCssVar("--menuColorFont");
//菜单激活字体颜色
const activeColor = useCssVar("--activeColor");
//顶部导航背景颜色
const menuColorBg = useCssVar("--el-menu-bg-color");
// const menuBg = useCssVar("--el-menu-bg-color")
//顶部导航标签背景色
const tagColorBg = useCssVar("--tagColorBg");
const tagColorFont = useCssVar("--tagColorFont");
// 阴影颜色
const shadowColor = useCssVar("--shadowColor");
//菜单 end
export interface SwitchColor {
  ColorFont: string;
  activeColor?: string;
  ColorBg: string;
}
/**
 * 将 RGBA 颜色转换为哈希 16 进制表示
 * @param {number} r - 红色值 (0-255)
 * @param {number} g - 绿色值 (0-255)
 * @param {number} b - 蓝色值 (0-255)
 * @param {number} [a=1] - 透明度 (0-1)，可选，默认为 1
 * @param {boolean} [forceAlpha=false] - 是否强制包含 alpha 通道，可选，默认为 false
 * @returns {string} 哈希 16 进制颜色表示（如 "#RRGGBB" 或 "#RRGGBBAA"）
 */
export function rgbaToHex(r, g, b, a = 1, forceAlpha = false) {
  // 辅助函数：将单个数值转换为两位 16 进制字符串
  const toHex = (num) => {
    const hex = Math.round(num).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };

  // 转换 RGB 部分
  const rgbHex = `#${toHex(r)}${toHex(g)}${toHex(b)}`;

  // 处理透明度
  if (a < 1 || forceAlpha) {
    // 将 alpha 值（0-1）转换为两位 16 进制（00-FF）
    const alphaHex = toHex(a * 255);
    return `${rgbHex}${alphaHex}`;
  }

  return rgbHex;
}

// 示例用法
console.log(rgbaToHex(255, 0, 0)); // "#FF0000"（不透明红色）
console.log(rgbaToHex(255, 0, 0, 0.5)); // "#FF000080"（半透明红色）
console.log(rgbaToHex(0, 128, 255, 1, true)); // "#0080FF"（强制包含 alpha，但透明度为 1）
export const switchColorNav = (dataColor: SwitchColor) => {
  const store = useIndexStore();
  store.setThemeCurrentNavItem( dataColor);
  navColorFont.value = dataColor.ColorFont;
  navColorBg.value = dataColor.ColorBg;
// bodyBg.value = "#f0f2f5"
};
//单独设置 导航色 字体颜色
export const switchColorNavFont = (dataColor: SwitchColor) => {
  const store = useIndexStore();
  store.setThemeCurrentNavItem( dataColor);
  navColorFont.value = dataColor.ColorFont;
};
//单独设置 导航色 字体颜色
export const switchColorNavBg = (dataColor: SwitchColor) => {
  const store = useIndexStore();
  store.setThemeCurrentNavItem(dataColor);
  navColorBg.value = dataColor.ColorBg;
};
export const switchColorMenu = (dataColor: SwitchColor) => {
  const store = useIndexStore();
  store.setThemeCurrentMenuItem( dataColor);
  menuColorFont.value = dataColor.ColorFont;
  menuColorBg.value = dataColor.ColorBg;
  activeColor.value = dataColor.activeColor;
};
export const setActiveColor = (dataColor: string) => {
  const store = useIndexStore();
  store.setActiveColor(dataColor);
  activeColor.value = dataColor;
};
export const clearTheme = () =>{
  localStorage.removeItem("themeNav");
  localStorage.removeItem("activeColor");
  localStorage.removeItem("themeMenu");
  localStorage.removeItem("themeColor");
  localStorage.removeItem("navTitleColorFont");
}
// 蓝色工业风
export const setInitTheme = (json:any) =>{
  const store = useIndexStore();
  
  //获取顶部导航主题
  let themeNav: any = getLocalStorage("themeNav") ||  json.themeNav
  let themeMenu: any =  getLocalStorage("themeMenu") || json.themeMenu
  let themecolor: string[] = getLocalStorage("themeColor") ||json.themeColor
 if (json.bodyBg !== undefined && json.bodyBg !== null && json.bodyBg !== '') {
    bodyBg.value = json.bodyBg;
}
if (json.tagColorBg !== undefined && json.tagColorBg !== null && json.tagColorBg !== '') {
    tagColorBg.value = json.tagColorBg;
}
if (json.tagColorFont !== undefined && json.tagColorFont !== null && json.tagColorFont !== '') {
    tagColorFont.value = json.tagColorFont;
}
if (json.textRegular !== undefined && json.textRegular !== null && json.textRegular !== '') {
    textRegular.value = json.textRegular;
}
if (json.fillBlankColor !== undefined && json.fillBlankColor !== null && json.fillBlankColor !== '') {
    blankColor.value = json.fillBlankColor;
}
if (json.bgColor !== undefined && json.bgColor !== null && json.bgColor !== '') {
    bgColor.value = json.bgColor;
}
if (json.placeholderColor !== undefined && json.placeholderColor !== null && json.placeholderColor !== '') {
    placeholderColor.value = json.placeholderColor;
}
if (json.borderColor !== undefined && json.borderColor !== null && json.borderColor !== '') {
    borderColor.value = json.borderColor;
}
if (json.secondaryTextColor !== undefined && json.secondaryTextColor !== null && json.secondaryTextColor !== '') {
    secondaryTextColor.value = json.secondaryTextColor;
}
if (json.borderColorTable !== undefined && json.borderColorTable !== null && json.borderColorTable !== '') {
    borderColorTable.value = json.borderColorTable;
}
if (json.textColorPrimary !== undefined && json.textColorPrimary !== null && json.textColorPrimary !== '') {
    textColorPrimary.value = json.textColorPrimary;
}
if (json.radioTextColor !== undefined && json.radioTextColor !== null && json.radioTextColor !== '') {
    radioTextColor.value = json.radioTextColor;
}else{
  radioTextColor.value = '#606266'; 
}
if (json.overlayColor !== undefined && json.overlayColor !== null && json.overlayColor !== '') {
    overlayColor.value = json.overlayColor;
}
if (json.commonBoxmp !== undefined && json.commonBoxmp !== null && json.commonBoxmp !== '') {
    commonBoxmp.value = json.commonBoxmp;
}
if (json.labelBgDetail !== undefined && json.labelBgDetail !== null && json.labelBgDetail !== '') {
    labelBgDetail.value = json.labelBgDetail;
}
if (json.inputDisabledBg !== undefined && json.inputDisabledBg !== null && json.inputDisabledBg !== '') {
    inputDisabledBg.value = json.inputDisabledBg;
}
if (json.inputBorderColorLigth !== undefined && json.inputBorderColorLigth !== null && json.inputBorderColorLigth !== '') {
    inputBorderColorLigth.value = json.inputBorderColorLigth;
}
if (json.labelTextColorDetail !== undefined && json.labelTextColorDetail !== null && json.labelTextColorDetail !== '') {
    labelTextColorDetail.value = json.labelTextColorDetail;
}
if (json.filterViewTextColor !== undefined && json.filterViewTextColor !== null && json.filterViewTextColor !== '') {
    filterViewTextColor.value = json.filterViewTextColor;
}
if (json.menuborderColorTable !== undefined && json.menuborderColorTable !== null && json.menuborderColorTable !== '') {
    menuborderColorTable.value = json.menuborderColorTable;
}
if (json.shadowColor !== undefined && json.shadowColor !== null && json.shadowColor !== '') {
    shadowColor.value = json.shadowColor;
}    
  let navTitleColorFont: string = getLocalStorage("navTitleColorFont") ||json.navTitleColorFont
  let activeColor: string = themeMenu.activeColor;
  //获取本地存储的通栏状态
  let isFull: boolean = getLocalStorage("isFull") || false
  let navIsTo: boolean =getLocalStorage("navIsTo") || false

  switchColorNav(themeNav); //初始化导航
  setActiveColor(activeColor);
  switchColorMenu(themeMenu); //初始化菜单
  store.setIsFull( isFull);
  store.setnavIsTo(navIsTo);
  store.setThemeColor( themecolor);
  store.setNavTitleColorFont(navTitleColorFont);
  //初始化主题色


  // document.documentElement.style.setProperty("--el-bg-color",'#09256B');
  
}




export const  checkTheme = (type:string) =>{
  setLocalStorage("themeType",type)
  switch (type) {
    case "system-default":
      setInitTheme(systemDefaultJSON)
      break;
    case "system-eyeshadow":
      setInitTheme(systemEyeshadowJSON)
      break;
    case "BlueIndustry":
      setInitTheme(blueIndustryJSON)
      break;

  }

}